<style>
.groupCompany {
  padding: 10px;
  min-height: 600px;
}
.smoke-top-title {
  margin-bottom: 10px;
  margin-left: 4px;
}
.smoke-count-item {
  border: 1px solid #666;
  border-radius: 5px;
  max-width: 200px;
  padding: 15px 0 10px;
  margin-right: 1.5vw;
  text-align: center;
  cursor: pointer;
}
.smoke-count-item > .smoke-p-title {
  font-size: 22px;
  line-height: 1;
}
.smoke-count-item > .smoke-p-desc {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}
.color-red {
  color: #e44e1d;
  border-color: #e44e1d;
}
.color-gold {
  color: #dbd148;
  border-color: #dbd148;
}
.color-orange {
  color: #eba035;
  border-color: #eba035;
}
.color-blue {
  color: #3089ff;
  border-color: #3089ff;
}
</style>

<template>

  <div class="groupCompany">
    <div style="background-color:#fff;padding:10px 10px 0;border-radius:4px;position:relative;">

      <Form
        ref="searchForm"
        :model="searchForm"
        value=true
        inline
      >
        <Row>
          <Form-item>
            <Input
              v-model="searchForm.imei"
              placeholder="IMEI"
            ></Input>
          </Form-item>
          <!-- <Form-item>
            <Cascader
              :data="areasBuildingsCascader"
              v-model="searchForm.areaGcbd"
              :filterable="true"
              transfer
              placeholder="联网单位"
            ></Cascader>
          </Form-item>

          <Form-item>

            <DatePicker
              type="date"
              placeholder="开始日期"
              style="width: 200px"
              v-model="searchForm.startTime"
            ></DatePicker>

          </Form-item>
          <Form-item>

            <DatePicker
              type="date"
              placeholder="结束时间"
              style="width: 200px"
              v-model="searchForm.endTime"
            ></DatePicker>

          </Form-item> -->
          <Button
            type="primary"
            icon="ios-search"
            @click="doSearchTableList"
          >搜 索</Button>
          <Button
            type="warning"
            icon="ios-color-wand"
            @click="resetSearch"
          >重置</Button>
        </Row>
      </Form>
    </div>
    <!--table-->
    <Row>
      <Table
        stripe
        size="small"
        :columns="tableColums"
        :data="tableData"
      ></Table>
    </Row>
    <Row>
      <Page
        :total="total"
        :current="currentPage"
        @on-change="changeCurrentPage"
        show-total
        style="float:right;margin-top:10px"
      ></Page>
    </Row>
  </div>

</template>

<script>
import { getHeartBeatPagedList } from "@/api/getData";
import { clearObj, formatDate } from "@/libs/util";
export default {
  name: "heart-beat",
  data() {
    return {
      tableColums: [
        {
          align: "center",
          title: "设备名称",
          key: "devName"
        },
        {
          align: "center",
          title: "IMEI",
          key: "imei"
        },
        {
          align: "center",
          title: "心跳内容",
          key: "alarmDetail"
        },
        {
          align: "center",
          title: "心跳时间",
          key: "alarmDate"
        }
      ],
      tableData: [],
      total: 0,
      currentPage: 1,
      delModal: false,
      delId: "", //删除的Id
      btnLoading: false,
      searchForm: {
        // dep_id: 0,
        // gc_id: 0,
        // alarmType: 0,
        // alarmStat: 0,
        // startTime: "",
        // endTime: "",
        imei:'',
        rows: 10,
        page: 1,
        // areaGcbd: []
      },
    };
  },
  created() {},
  mounted() {
    this.getTableList();
  },
  methods: {
    resetSearch() {
      this.searchForm.imei = "";
    },
    doSearchTableList() {
      this.currentPage = 1;
      this.getTableList();
    },
    async getTableList() {
      this.searchForm.page = this.currentPage - 1;
      const params = this.searchForm;
      const result = await getHeartBeatPagedList(params);

      if (result.code == 0) {
        let res = result.data;
        this.total = res.total;
        this.tableData = res.data;
      }
    },
    changeCurrentPage(num) {
      this.currentPage = num;
      this.getTableList();
    }
   
  }
};
</script>
